.flood-analysis-modal {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #000;

    .modal-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        h2 {
            color: #fff;
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .close-btn {
            color: #fff;
            font-size: 18px;

            &:hover {
                color: #ff4d4f;
            }
        }
    }

    .cesium-container {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 80px;
        overflow: hidden;
    }

    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;

        .loading-content {
            text-align: center;
            color: #fff;

            .loading-spinner {
                width: 50px;
                height: 50px;
                border: 4px solid #f3f3f3;
                border-top: 4px solid #1890ff;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 0 auto 20px;
            }

            p {
                font-size: 16px;
                margin: 0;
            }
        }
    }

    .analysis-tools {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 0 20px;
        z-index: 1000;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);

        .tool-section,
        .water-level-control,
        .flood-speed-control,
        .analysis-buttons,
        .elevation-info,
        .current-status {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;

            label {
                color: #fff;
                font-size: 14px;
                white-space: nowrap;
                font-weight: 500;
            }

            .ant-slider {
                .ant-slider-track {
                    background: #1890ff;
                }

                .ant-slider-handle {
                    border-color: #1890ff;
                }
            }

            .ant-input-number {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: #fff;

                .ant-input-number-input {
                    background: transparent;
                    color: #fff;
                }

                &:hover {
                    border-color: rgba(255, 255, 255, 0.5);
                }

                &:focus,
                &.ant-input-number-focused {
                    border-color: #1890ff;
                    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
                }
            }
        }

        .elevation-info {
            background: rgba(0, 0, 0, 0.3);
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);

            span {
                color: #00ff88;
                font-size: 12px;
                margin-left: 8px;
                white-space: nowrap;
            }
        }

        .current-status {
            background: rgba(24, 144, 255, 0.2);
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid rgba(24, 144, 255, 0.5);

            label {
                color: #40a9ff;
                font-weight: 600;
            }
        }

        .analysis-buttons {
            gap: 12px;
        }

        .ant-btn {
            height: 40px;
            padding: 0 24px;
            font-size: 16px;
            border-radius: 6px;

            &.ant-btn-primary {
                background: #1890ff;
                border-color: #1890ff;

                &:hover {
                    background: #40a9ff;
                    border-color: #40a9ff;
                }
            }

            &:not(.ant-btn-primary) {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: #fff;

                &:hover {
                    background: rgba(255, 255, 255, 0.2);
                    border-color: rgba(255, 255, 255, 0.5);
                    color: #fff;
                }
            }
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

// 覆盖Antd Modal的样式
.ant-modal {
    &.ant-modal-fullscreen {
        .ant-modal-content {
            height: 100vh;
            border-radius: 0;
        }

        .ant-modal-body {
            padding: 0;
            height: 100vh;
        }
    }
}

.modal-full-screen {
    width: 100% !important;
    height: 100% !important;

    .ant-modal-content {
        height: 100% !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }

    .ant-modal-body {
        flex: 1;
        padding: 0 !important;
        height: 0 !important;
    }
}